<template>
  <div class="content">
    <div>
      <NavBar :title="title" :route="route"></NavBar>
    </div>
    <div>
      <van-tabs v-model="activeName" color="#2a82e4" title-active-color="#2a82e4">
        <van-tab title="全部" name="a">
          <div class="Information" v-for="(item,index) in 10" :key="index">
            <div class="nav1">
              <div class="title">
                <img class="logo" :src="Loger" alt="">
                <span class="custom-title">金榜登科第三中学1</span>
              </div>
            </div>
            <div class="xian"></div>
            <p>考&#12288;&#12288;试：<span>2022年艺体生招生考试</span></p>
            <p>考&#12288;&#12288;点：<span>廊坊市广阳区考点</span></p>
            <p>考试专业：<span>音乐</span></p>
            <p>考试时间：<span>3月1日-3月6日</span></p>
            <p class="SignUp">
              <van-button type="info" @click="GoOnlineEnter">去确认</van-button>
            </p>
          </div>
        </van-tab>
        <van-tab title="未确认" name="b">
          <div class="Information" v-for="(item,index) in 10" :key="index">
            <div class="nav1">
              <div class="title">
                <img class="logo" :src="Loger" alt="">
                <span class="custom-title">金榜登科第三中学2</span>
              </div>
            </div>
            <div class="xian"></div>
            <p>考&#12288;&#12288;试：<span>2022年艺体生招生考试</span></p>
            <p>考&#12288;&#12288;点：<span>廊坊市广阳区考点</span></p>
            <p>考试专业：<span>音乐</span></p>
            <p>考试时间：<span>3月1日-3月6日</span></p>
            <p class="SignUp">
              <van-button type="info" @click="GoOnlineEnter">去确认</van-button>
            </p>
          </div>
        </van-tab>
        <van-tab title="已确认" name="c">
          <div class="Information" v-for="(item,index) in 10" :key="index">
            <div class="nav1">
              <div class="title">
                <img class="logo" :src="Loger" alt="">
                <span class="custom-title">金榜登科第三中学3</span>
              </div>
            </div>
            <div class="xian"></div>
            <p>考&#12288;&#12288;试：<span>2022年艺体生招生考试</span></p>
            <p>考&#12288;&#12288;点：<span>廊坊市广阳区考点</span></p>
            <p>考试专业：<span>音乐</span></p>
            <p>考试时间：<span>3月1日-3月6日</span></p>
            <p class="SignUp">
              <van-button type="info" @click="GoOnlineEnter">去确认</van-button>
            </p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
    import NavBar from '@/components/navBar.vue'
    import Loger from '../../assets/logea.png'

    export default {
        data() {
            return {
                // 标题  路由
                title: '在线确认',
                route: '/MyHome',
                activeName: 'a',
                Loger
            }
        },
        methods: {
            GoOnlineEnter() {
                this.$router.push({path: 'GoOnlineEnter'})
            }
        },
        components: {
            NavBar
        }
    }
</script>

<style scoped>

  .Information {

    margin: 15px 15px 0 15px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 2px 15px;

  }

  .Information p {
    font-size: 14px;
  }

  .Information p span {
    font-size: 14px;
    text-align: left;
    font-weight: bold;
  }

  .xian {
    margin: 1px 0;
    height: 1px;
    background-color: rgba(229, 229, 229, 1);
  }

  .SignUp {
    text-align: right;

  }

  .SignUp .van-button {
    height: 30px;
    width: 75px;
  }

  .title {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    margin-top: 10px;

  }

  .logo {
    margin-right: 10px;
    width: 30px;
    height: 30px;
  }

  .content {
    background-color: #f7f7f7;
    width: 100%;
  }

</style>
